<template>
  <div class="project-application-list-container">
    <div class="row radio-row">
      <el-radio-group v-model="searchForm.condition.state" @change="getList">
        <el-radio-button class="state-item">全部</el-radio-button>
        <el-radio-button class="state-item" :label="item.value" :key="item.value" v-for="item in options.normalStateOptions">
          {{ item.label }}
          <span class="state-num" :class="{big: item.num > 100}"><span>{{item.num}}</span></span>
        </el-radio-button>
      </el-radio-group>
      <el-radio-group v-model="searchForm.condition.state" style="margin-left: 20px;" @change="getList">
        <el-radio-button class="state-item" :label="item.value" :key="item.value" v-for="item in options.delayOptions">
          {{ item.label }}
          <span class="state-num" :class="{big: item.num > 100}"><span>{{item.num}}</span></span>
        </el-radio-button>
      </el-radio-group>
    </div>

    <div class="row search-row">
      <el-form ref="formRef" :model="searchForm.condition" inline label-width="auto">
        <div style="display: flex;align-items: flex-end;">
          <div style="flex: 1;display: flex;flex-wrap: wrap;">
            <el-form-item label="项目编号" prop="projectNo" style="width: 21%">
              <el-input v-model="searchForm.condition.projectNo" placeholder="支持模糊搜索"/>
            </el-form-item>
            <el-form-item label="项目名称" prop="projectName" style="width: 21%">
              <el-input v-model="searchForm.condition.projectName" placeholder="支持模糊搜索"/>
            </el-form-item>
            <el-form-item label="项目单位" prop="projectUnit" style="width: 21%">
              <el-tree-select v-model="searchForm.condition.projectUnit" :data="options.companyUnitTreeData" node-key="organizationId" placeholder="请选择"
                              show-checkbox check-strictly :props="options.companyUnitTreeProps" style="width: 100%;"/>
            </el-form-item>
            <el-form-item label="项目负责人" prop="projectChargePersonName" style="width: 21%">
              <el-input v-model="searchForm.condition.projectChargePersonName" placeholder="请输入项目负责人"/>
            </el-form-item>
            <el-form-item label="涉及作业" prop="specialJobType" style="width: 21%">
              <el-tree-select v-model="searchForm.condition.specialJobType" :data="options.projectWorkTypeOptions" node-key="value" placeholder="请选择"
                              show-checkbox check-strictly :props="options.projectWorkTypeTreeProps" class="tree-select" style="width: 100%;"/>
            </el-form-item>
            <!--        <el-form-item label="开始时间" prop="startTime" style="width: 21%">-->
            <!--          <el-date-picker v-model="searchForm.condition.startTime" style="width: 100%;" placeholder="请选择" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"/>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="结束时间" prop="endTime" style="width: 21%">-->
            <!--          <el-date-picker v-model="searchForm.condition.endTime" style="width: 100%;" placeholder="请选择" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"/>-->
            <!--        </el-form-item>-->
            <el-form-item label="申请时间" prop="applyTime" style="width: 30%">
              <el-date-picker v-model="searchForm.condition.applyTime" style="width: 100%;" placeholder="请选择" start-placeholder="开始时间" end-placeholder="结束时间" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"/>
            </el-form-item>
            <el-form-item label="航站楼" prop="location">
              <el-checkbox :indeterminate="isIndeterminateLocation" v-model="checkAllLocation" @change="handleCheckAllChangeLocation">全选 {{ getSum(typeNumEnum.terminal) }}</el-checkbox>
              <div style="margin-left: 20px;"></div>
              <el-checkbox-group v-model="searchForm.condition.location" @change="handleCheckedChangeLocation">
                <el-checkbox v-for="item in options.locationEnum" :label="item.value" :key="item.value">{{item.label}} {{ typeNumEnum.terminal[item.value] }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="项目类型" prop="projectType">
              <el-checkbox :indeterminate="isIndeterminateProjectType" v-model="checkAllProjectType" @change="handleCheckAllChangeProjectType">全选 {{getSum(typeNumEnum.projectType)}}</el-checkbox>
              <div style="margin-left: 20px;"></div>
              <el-checkbox-group v-model="searchForm.condition.projectType" @change="handleCheckedChangeProjectType">
                <el-checkbox v-for="item in options.projectTypeEnum" :label="item.value" :key="item.value">{{item.label}} {{ typeNumEnum.projectType[item.value] }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button @click="handleReset">清空</el-button>
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="row table-row">
      <div class="table-head">
        <span>数据列表</span>
        <div>
          <el-button @click="handleExportList" :disabled="exportLoading">导出</el-button>
          <el-button type="primary" @click="openBeforeCreate" v-if="pageType===ProjectListType.LIST">新增</el-button>
        </div>
      </div>
      <el-table :data="tableData" class="project-application-table" v-loading="loading">
        <el-table-column label="序号" prop="index">
          <template v-slot="{$index}">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column width="120" label="项目类型" prop="projectType" :formatter="(row, column, cellValue) => dicFormatter(options.projectTypeEnum, cellValue)"/>
        <el-table-column width="200" label="项目编号" prop="projectNo"/>
        <el-table-column width="200" label="项目名称" prop="projectName"/>
        <el-table-column width="200" label="项目单位" prop="projectUnitName"/>
        <el-table-column width="120" label="项目负责人" prop="projectChargePersonName"/>
        <el-table-column width="200" label="施工单位" prop="constructionUnitName"/>
        <el-table-column width="200" label="涉及高风险" v-if="pageType === ProjectListType.REVIEW_LIST" prop="relateWork" :formatter="isHighRisk"/>
        <el-table-column width="200" label="涉及作业" prop="relateWork"/>
        <el-table-column width="200" label="申请时间" prop="createTime"/>
        <el-table-column width="120" label="状态" prop="state" :formatter="(row, column, cellValue) => dicFormatter(options.stateOptions, cellValue)"/>
        <el-table-column width="200" label="操作" fixed="right">
          <template v-slot="{row}">
            <template v-if="pageType===ProjectListType.LIST">
              <el-button type="text" @click="handleView(row)">查看</el-button>
              <el-button type="text" @click="handleChange(row)" v-if="row.enableChange">变更</el-button>

              <el-button type="text" @click="openUploadForm(row, '上传培训单', ApplyApproveType.UPLOAD)" v-if="operateBtnVisible(row, '培训')">上传培训单</el-button>
              <el-button type="text" @click="openUploadForm(row, '上传押金条', ApplyApproveType.UPLOAD)" v-if="operateBtnVisible(row, '待收押金')">上传押金条</el-button>
              <el-button type="text" @click="openUploadForm(row, '填写开工安全评估单', ApplyApproveType.SAFE_EVALUATE)" v-if="operateBtnVisible(row, '安全')">安全评估单
              </el-button>
              <el-button type="text" @click="openUploadForm(row, '待发核准证', ApplyApproveType.UPLOAD)" v-if="operateBtnVisible(row, '核准')">上传核准证</el-button>
              <el-button type="text" @click="openUploadForm(row, '填报开工时间', ApplyApproveType.DATE)" v-if="operateBtnVisible(row, '开工')">填报开工时间</el-button>

              <el-button type="text" @click="openDelayDialog(row)" v-if="row.state=='8'">申请延期</el-button>
              <el-button type="text" @click="openHandoverDialog(row)" v-if="row.state=='8'">申请验收</el-button>
              <el-button type="text" @click="openUploadDepositrefundDialog(row)" v-if="row.state==options.stateEnum.WAIT_DEPOSIREFUND">上传验收单</el-button>
            </template>

            <template v-if="pageType===ProjectListType.REVIEW_LIST">
              <el-button type="text" @click="handleReview(row)">查看</el-button>

              <el-button type="text" @click="openReviewForm(row, '审批培训记录', ApplyApproveType.UPLOAD)" v-if="operateBtnVisible(row, '培训')">审批培训单</el-button>
              <el-button type="text" @click="openReviewForm(row, '审批押金条', ApplyApproveType.UPLOAD)" v-if="operateBtnVisible(row, '押金')">审批押金条</el-button>
              <el-button type="text" @click="openReviewForm(row, '审批开工安全评估单', ApplyApproveType.SAFE_EVALUATE)" v-if="operateBtnVisible(row, '安全')">安全评估
              </el-button>
              <el-button type="text" @click="openReviewForm(row, '待发核准证', ApplyApproveType.UPLOAD)" v-if="operateBtnVisible(row, '核准')">审批核准证</el-button>
              <el-button type="text" @click="openReviewForm(row, '审批开工时间', ApplyApproveType.DATE)" v-if="operateBtnVisible(row, '开工') && row.currentProcessNode?.nodeType !== '1'">允许开工</el-button>

              <el-button type="text" @click="openReviewDelayDialog(row)" v-if="row.state=='9'">审批延期</el-button>
              <el-button type="text" @click="openReviewHandoverDialog(row)" v-if="row.state=='10'">审批验收</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <HyPagination background layout="prev, pager, next" :total="searchForm.total" v-model:current-page="searchForm.pageNum"
                    @size-change="handleQuery" @current-change="getList"/>
    </div>

    <ApplyApproveDialog ref="applyApproveDialogRef"/>
    <ReviewDialog ref="reviewDialogRef"/>
    <ApplyDelayDialog ref="applyDelayDialogRef"/>
    <ReviewDelayDialog ref="reviewDelayDialogRef"/>
    <ApplyHandoverDialog ref="applyHandoverDialogRef"/>
    <ReviewHandoverDialog ref="reviewHandoverDialogRef"/>
    <ApplyUploadDepositrefundDialog ref="applyUploadDepositrefundDialogRef"/>
    <ApplyChangeDialog ref="applyChangeDialogRef"/>


    <edit-dialog tilte="新增施工项目申请" :centerDialogVisible="addBeforeVisible" width="700" @Cancel="addBeforeVisible=false" @Submit="handleToAdd">
      <template #content>
        <div class="before-create-dialog">
          <div class="before-create-dialog-item" @click="handleToAdd(1)">
            <img class="before-create-dialog-item-image" src="@/assets/images/create-application1.jpg">
            <div class="before-create-dialog-item-type">已立项项目</div>
          </div>
          <div class="before-create-dialog-item" @click="handleToAdd(2)">
            <img class="before-create-dialog-item-image" src="@/assets/images/create-application2.jpg">
            <div class="before-create-dialog-item-type">临时施工</div>
          </div>
          <div class="before-create-dialog-item" @click="handleToAdd(3)">
            <img class="before-create-dialog-item-image" src="@/assets/images/create-application3.jpg">
            <div class="before-create-dialog-item-type">维修施工</div>
          </div>
        </div>
      </template>
    </edit-dialog>
  </div>
</template>

<script>
import router from '@/router'
import EditDialog from "@/components/editDialog/index.vue";
import {exportProjectList, getProjectConditionsStatNum, getProjectPageList} from "@/api/construction-project/projectManage";
import {getResource} from "@/api/resource";
import {
  ApplyApproveType, approveNodeTypeEnum,
  dicFormatter, nodeTypeEnum,
  personSourceEnum,
  personTypeEnum,
  ProjectListType,
  stateEnum
} from "@/views/construction/project-application/projectUtil";
import HyPagination from "@/views/construction/project-application/componens/HyPagination";
import {dayjs} from "element-plus";
import ApplyApproveDialog from "@/views/construction/project-application/review-components/ApplyApproveDialog";
import ReviewDialog from "@/views/construction/project-application/review-components/ReviewDialog";
import ApplyDelayDialog from "@/views/construction/project-application/review-components/ApplyDelayDialog";
import ApplyHandoverDialog from "@/views/construction/project-application/review-components/ApplyHandoverDialog";
import ReviewDelayDialog from "@/views/construction/project-application/review-components/ReviewDelayDialog";
import ReviewHandoverDialog from "@/views/construction/project-application/review-components/ReviewHandoverDialog";
import ApplyUploadDepositrefundDialog from "@/views/construction/project-application/review-components/ApplyUploadDepositrefundDialog";
import store from "@/store";
import ApplyChangeDialog from "@/views/construction/project-application/review-components/ApplyChangeDialog";

export default {
  name: "ProjectApplicationList",
  components: {
    ApplyChangeDialog,
    ApplyUploadDepositrefundDialog,
    ReviewHandoverDialog,
    ReviewDelayDialog, ApplyHandoverDialog, ApplyDelayDialog, ReviewDialog, ApplyApproveDialog, HyPagination , EditDialog
  },
  data() {
    return {
      pageType: ProjectListType.LIST,
      loading: false,
      addBeforeVisible: false,

      isIndeterminateProjectType: false,
      checkAllProjectType: false,

      isIndeterminateLocation: false,
      checkAllLocation: false,

      searchForm: {
        condition: {
          projectType: undefined
        },
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      options: {
        companyUnitTreeData: [],
        locationEnum: [],
        projectTypeEnum: [],
        userScaleEnum: [],
        personTypeEnum: personTypeEnum,
        personSourceEnum: personSourceEnum,
        nodeTypeEnum: nodeTypeEnum,
        approveNodeTypeEnum: approveNodeTypeEnum,
        // 动态状态列表
        stateOptions: [],
        delayOptions: [],
        normalStateOptions: [],
        // 固定状态列表
        stateEnum: stateEnum,
        projectWorkTypeOptions: [], // 特种作业工作类型
        companyUnitTreeProps: {
          label: 'organizationName',
        },
        projectWorkTypeTreeProps: {
          label: 'label',
          disabled: (data, node) => {
            return data.children
          }
        },
      },
      typeNumEnum: {
        projectType: {},
        projectStateList: {},
        state: {},
        terminal: {}
      },
      dicFormatter,
      ProjectListType,
      ApplyApproveType,
      exportLoading:false
    }
  },
  provide() {
    return {
      options: this.options
    }
  },
  mounted() {
    this.initQuery()
    this.initOptions()
    this.getList()
  },
  methods: {
    handleCheckAllChangeProjectType(value) {
      let all = this.options.projectTypeEnum.map(item => item.value)
      this.searchForm.condition.projectType = value ? all : [];
      this.isIndeterminateProjectType = false;
    },
    handleCheckedChangeProjectType(value) {
      let total = this.options.projectTypeEnum.length
      let checkedCount = value.length;
      this.checkAllProjectType = checkedCount === total;
      this.isIndeterminateProjectType = checkedCount > 0 && checkedCount < total;
    },


    handleCheckAllChangeLocation(value) {
      let all = this.options.locationEnum.map(item => item.value)
      this.searchForm.condition.location = value ? all : [];
      this.isIndeterminateLocation = false;
    },
    handleCheckedChangeLocation(value) {
      let total = this.options.locationEnum.length
      let checkedCount = value.length;
      this.checkAllLocation = checkedCount === total;
      this.isIndeterminateLocation = checkedCount > 0 && checkedCount < total;
    },


    isHighRisk(row) {
      if (row.relateWork) {
        return row.relateWork.includes('三级') ? '是' : '否'
      }
      return '否'
    },
    areasFormatter(row, column, cellValue) {
      if (!row.areas || !row.areas.length) return
      let work = []
      row.areas?.forEach(area => {
        if (area.specialJobType && area.specialJobType.length) {
          work.push(...area.specialJobType)
        }
      })
      let map = work.map(item => dicFormatter(this.options.projectWorkTypeOptions, item))
      return map.join(',')
    },
    initQuery() {
      this.pageType = this.$route.path === '/construction/project-review' ? ProjectListType.REVIEW_LIST : ProjectListType.LIST
      let formStr = localStorage.getItem(`projectList${this.pageType}`)
      if (formStr) {
        Object.assign(this.searchForm.condition, JSON.parse(formStr).condition)
      }
    },
    initOptions() {
      const tree = store.getters['user/getOrganTree']
      this.options.companyUnitTreeData = tree
      Promise.all([
        getResource('CM_PROJECT_TYPE'),
        getResource('terminals'),
        getResource('SPECIAL_OPERATION'),
        getResource('PROJECT_SCALE'),
        getResource('CM_PROJECT_WORK_TYPE'),
        getResource('CM_PROJECT_WORK_TYPE'),
      ]).then(([
                 res1,
                 res2,
                 res3,
                 PROJECT_SCALE,
                 CM_PROJECT_WORK_TYPE,
               ]) => {
        this.options.projectTypeEnum = res1.data.properties.meta
        this.options.locationEnum = res2.data.properties.meta
        this.options.specialOperationEnum = res3.data.properties.meta
        this.options.projectScaleEnum = PROJECT_SCALE.data.properties.meta
        this.options.projectWorkTypeOptions = CM_PROJECT_WORK_TYPE.data.properties.meta
      })
    },
    handleQuery() {
      this.searchForm.pageNum = 1
      this.getList()
    },
    handleReset() {
      localStorage.removeItem(`projectList${this.pageType}`)
      this.$refs.formRef.resetFields()
      this.isIndeterminateProjectType = false
      this.isIndeterminateLocation = false

      this.checkAllProjectType = false
      this.checkAllLocation = false
      this.getList()
    },
    getList() {
      localStorage.setItem(`projectList${this.pageType}`, JSON.stringify(this.searchForm))
      this.loading = true
      this.getStat()
      let {condition, ...more} = this.searchForm
      let {projectType, location,applyTime, ...morecondition} = condition
      let newProjectType = projectType?.length < this.options.projectTypeEnum.length && projectType?.length > 0 ? projectType : undefined
      let newLocation = location?.length < this.options.locationEnum.length && location?.length > 0 ? location : undefined
      let startTime, endTime
      if (applyTime) {
        startTime=applyTime[0]
        endTime=applyTime[1]
      }
      getProjectPageList({
        pageNum: this.searchForm.pageNum,
        pageSize: this.searchForm.pageSize,
        condition: {
          projectType: newProjectType,
          location: newLocation,
          startTime,
          endTime,
          ...morecondition,
        }
      }).then(res => {
        let {total, list} = res.data
        list.forEach(item => {
          item.relateWork = this.areasFormatter(item)
        })
        this.tableData = list
        this.searchForm.total = total
      }).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 300)
      })
    },
    getStat() {
      getProjectConditionsStatNum().then(res => {
        let projectStateList = res.data.projectStateList
        let extensionList = res.data.extensionList
        let normalStateOptions = projectStateList.map(item => ({label: item.name, value: item.val, num: item.num}))
        let delayOptions = extensionList.map(item => ({label: item.name, value: item.val, num: item.num}))
        this.options.stateOptions = [...delayOptions, ...normalStateOptions]
        this.options.normalStateOptions = normalStateOptions
        this.options.delayOptions = delayOptions

        this.typeNumEnum = res.data
      })
    },
    handleToAdd(projectType) {
      router.push({
        path: '/construction/add',
        query: {projectType}
      })
    },
    openBeforeCreate() {
      this.addBeforeVisible = true
    },
    handleView(row) {
      router.push({
        path: `/construction/details`,
        query: {id: row.id}
      })
    },
    openUploadForm(row, title, formType) {
      this.$refs.applyApproveDialogRef.open({
        row, title, formType,
        resolve: () => {
          this.getList()
        }
      })
    },
    openDelayDialog(row, title, formType) {
      this.$refs.applyDelayDialogRef.open({
        row, title, formType,
        resolve: () => {
          this.getList()
        }
      })
    },
    openHandoverDialog(row, title, formType) {
      this.$refs.applyHandoverDialogRef.open({
        row, title, formType,
        resolve: () => {
          this.getList()
        }
      })
    },
    // 打开待上传验收单
    openUploadDepositrefundDialog(row, title, formType) {
      this.$refs.applyUploadDepositrefundDialogRef.open({
        row, title, formType,
        resolve: () => {
          this.getList()
        }
      })
    },
    openCheckDialog(row, title, formType) {
      this.$refs.applyApproveDialogRef.open({
        row, title, formType,
        resolve: () => {
          this.getList()
        }
      })
    },
    openReviewForm(row, title, formType) {
      this.$refs.reviewDialogRef.open({
        row, title, formType,
        resolve: () => {
          this.getList()
        }
      })
    },
    openReviewDelayDialog(row, title, formType) {
      this.$refs.reviewDelayDialogRef.open({
        row, title, formType,
        resolve: () => {
          this.getList()
        }
      })
    },
    openReviewHandoverDialog(row, title, formType) {
      this.$refs.reviewHandoverDialogRef.open({
        row, title, formType,
        resolve: () => {
          this.getList()
        }
      })
    },
    operateBtnVisible(row, title) {
      if (this.pageType === ProjectListType.REVIEW_LIST) {
        let find = this.options.stateOptions.find(item => item.value === row.state)
        return find && find.label.includes(title) && row.preNodeContent
      } else {
        let find = this.options.stateOptions.find(item => item.value === row.state)
        return find && find.label.includes(title) && !row.preNodeContent
      }
    },
    operateChangeVisible(row) {
      return this.pageType === ProjectListType.LIST && !row.preNodeContent && stateEnum.EXITED != row.state && stateEnum.REJECT != row.state && stateEnum.PENDING != row.state
        && stateEnum.HANDOVER_APPROVING != row.state && stateEnum.WAIT_DEPOSIREFUND != row.state && stateEnum.UNDER_CONSTRUCTION != row.state
        && stateEnum.DELAY_APPROVING != row.state
    },
    handleChange(row) {
      this.$refs.applyChangeDialogRef.open({
        row, resolve: () => {
          this.getList()
        }
      })
    },
    handleReview(row) {
      router.push({
        path: `/construction/review`,
        query: {id: row.id}
      })
    },
    getSum(obj) {
      let values = Object.values(obj)
      let sum = 0
      values.forEach(item => sum += Number.parseInt(item))
      return sum
    },

    handleExportList() {
      this.exportLoading = true
      exportProjectList(this.searchForm.condition).then(res => {
        const link = document.createElement('a')
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        link.style.display = 'none'
        link.href = URL.createObjectURL(blob)
        link.setAttribute(
          'download',
          `施工项目${this.pageType==='添加'?'申请':'审批'}${dayjs().format('YYYY-MM-DD')}.xlsx`
        )
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }).finally(()=>{
        this.exportLoading = false
      })
    }
  },
}
</script>

<style lang="less">
.project-application-list-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;

  .row {
    box-sizing: border-box;
    padding: 20px;
    background: white;
    margin-top: 20px;
    border-radius: 5px;
  }

  .radio-row {
    display: flex;
    position: relative;

    .state-item {

      .state-num {
        z-index: 1;
        position: absolute;
        right: -3px;
        top: -9px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 12px;
        background: #D9001B;
        color: white;

        &.big span {
          transform: scale(0.8);
        }
      }
    }
  }

  .search-row {
    padding: 20px 0 10px 20px !important;
  }

  .table-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .table-head {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
  }

  .project-application-table {
    --el-table-header-bg-color: #F3F4F7;
    --el-table-header-text-color: #353A42;
    --el-table-row-hover-bg-color: #ebf7ff;
    --el-table-text-color: #535862;

    &.el-table--large {
      .el-table__header-wrapper {
        .el-table__cell {
          padding: 16px 0;
        }
      }

      .el-table__body-wrapper {
        .el-table__cell {
          padding: 15px 0;
        }
      }
    }
  }


  .before-create-dialog {
    display: flex;
    justify-content: space-around;

    .before-create-dialog-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 150px;
      height: 150px;
      background: #F6FCFF;
      border-radius: 10px;
      cursor: pointer;

      .before-create-dialog-item-image {
        width: 50px;
        height: 50px;
        background: red;
        margin-bottom: 20px;
      }

      .before-create-dialog-item-type {

      }
    }
  }

}
</style>
